<template>
  <div style="flex-direction: column; display: flex; height: 100%">
    <div class="person">
      <div class="personal-message">
        <div class="avatar">
          <img :src="userInfo.avatar" />
        </div>
        <div class="message">
          <p style="font-size: 20px">{{ userInfo.username }}</p>
          <div class="skills">
            <div
              style="display: flex; align-items: center"
              @click="openFollowFun"
            >
              关注
              <p>
                {{ userInfo.followCount == null ? "-" : userInfo.followCount }}
              </p>
            </div>
            <span> |</span>
            <div
              style="display: flex; align-items: center"
              @click="openFollowerFun"
            >
              粉丝
              <p>
                {{
                  userInfo.followerCount == null ? "-" : userInfo.followerCount
                }}
              </p>
            </div>
            <span>|</span> 获赞
            <p>
              {{
                userInfo.totalFavorited == null ? "-" : userInfo.totalFavorited
              }}
            </p>
          </div>
          <p style="font-size: 12px; color: #e7e7e7">
            音秀号：{{ userInfo.account }}
          </p>
        </div>
      </div>
      <div v-if="token" class="save-login-info-switch">
        <el-tooltip
          style="border: none; padding: 0; margin: 0 5px"
          content="Bottom Center 提示文字"
        >
          <el-button
            icon="el-icon-question"
            size="small"
          ></el-button> </el-tooltip
        >保存登录信息<el-switch
          v-model="saveLoginInfo"
          active-color="#13ce66"
          inactive-color="#c7c7c7"
          :active-value="true"
          :inactive-value="false"
          style="zoom: 0.7; margin-left: 7px"
        >
        </el-switch>
      </div>
      <div v-if="token" class="edit-profile">
        <el-button size="small" type="info" @click="editProfile"
          >编辑资料</el-button
        >
      </div>
    </div>
    <div class="works">
      <el-tabs v-model="activeTab" @tab-click="handleWorksClick()">
        <el-tab-pane>
          <span slot="label"
            >作品<i>{{ token ? this.allWorksList.length : "" }}</i>
          </span>
          <div v-if="token" class="secondary-search">
            <el-input placeholder="搜索你发布的作品" v-model="allWorksKeyword">
              <i
                slot="suffix"
                class="el-icon-search"
                style="line-height: 40px; cursor: pointer"
                @click="searchAllWorks()"
              ></i>
            </el-input>
          </div>
          <DiverseWorks v-if="token" :dataList="allWorksList"></DiverseWorks>
          <NoLoginView v-else></NoLoginView>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">喜欢<i class="el-icon-lock"></i> </span>
          <div class="secondary-search">
            <el-input
              v-if="token"
              placeholder="搜索你赞过的作品"
              v-model="likeWorksKeyword"
            >
              <i
                slot="suffix"
                class="el-icon-search"
                style="line-height: 40px; cursor: pointer"
                @click="searchLikeWorks()"
              ></i>
            </el-input>
          </div>
          <DiverseWorks v-if="token" :dataList="likeList"></DiverseWorks>
          <NoLoginView v-else></NoLoginView>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">收藏<i class="el-icon-lock"></i> </span>
          <DiverseWorks
            v-if="token"
            :dataList="collectWorksList"
          ></DiverseWorks>
          <NoLoginView v-else></NoLoginView>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">观看历史</span>
          <div class="more-help" v-if="token">
            <el-button type="text" @click="deleteHistoryFun()">
              <i class="iconfont icon-eliminate" style="font-size: 18px"></i
            ></el-button>
            <el-popover
              placement="top-start"
              trigger="hover"
              content="观看历史功能已开启，部分内容电脑端暂不支持查看，请在APP内查看。"
            >
              <el-button type="text" slot="reference" style="padding: 0"
                ><i class="iconfont icon-help"></i
              ></el-button>
            </el-popover>
          </div>
          <DiverseWorks
            v-if="token"
            :dataList="historyWorksList"
          ></DiverseWorks>
          <NoLoginView v-else></NoLoginView>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="user-footer">
      <div class="footer-first">
        <ul>
          <li>广告投放</li>
          <li>用户服务协议</li>
          <li>隐私政策</li>
          <li>账号找回</li>
          <li>联系我们</li>
          <li>加入我们</li>
          <li>营业执照</li>
          <li>下载音秀</li>
        </ul>
      </div>
      <div class="footer-second">
        <p>
          网络谣言曝光台 ｜ 网上有害信息举报 ｜ 违法和不良信息举报：400-140-2108
          ｜ 青少年守护专线：400-9922-556 ｜
          算法推荐专项举报：sfjubao@bytedance.com ｜
          网络内容从业人员违法违规行为举报：feedback@douyin.com
          京ICP备16016397号-3 ｜ 广播电视节目制作经营许可证
        </p>
        <p>
          2023 © 音秀 赣ICP备2023006182号 ｜ 网络文化许可证-(2023) ｜
          互联网宗教信息服务许可证
        </p>
      </div>
    </div>

    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
        append-to-body
        class="attention"
      >
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="'关注(' + followList.length + ')'" name="first"
              ><Attention :dataList="followList" :type="1"></Attention
            ></el-tab-pane>
            <el-tab-pane :label="'粉丝(' + fansList.length + ')'" name="second"
              ><Attention :dataList="fansList" :type="2"></Attention
            ></el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="编辑资料"
        :visible.sync="dialogFormVisible"
        width="30%"
        :before-close="handleClose"
        append-to-body
        class="edit-message"
      >
        <div class="avator-photo">
          <!-- <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUploadTitle"
          > -->
          <el-upload
            class="avatar-uploader"
            action=""
            list-type="picture"
            :show-file-list="false"
            :http-request="submitUploadTitlePhoto"
            :before-upload="beforeAvatarUploadTitle"
          >
            <div v-if="userInfo.avatar">
              <div style="position: relative">
                <img :src="userInfo.avatar" class="avatar-blur" /><i
                  class="el-icon-camera-solid add-avatar"
                ></i>
              </div>
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div><p style="font-size: 12px">点击修改头像</p></div>
        </div>
        <div class="edit-name">
          <span>名字</span
          ><el-input
            type="text"
            placeholder="请输入内容"
            maxlength="20"
            show-word-limit
            v-model="userInfo.username"
          >
          </el-input>
        </div>
        <div class="edit-experience">
          <span>简介</span
          ><el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="userInfo.signature"
          >
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >保存</el-button
          >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getLikeListApi,
  getAllWorksListApi,
  getCollectListApi,
  getHistoryListApi,
  searchFansListApi,
  searchFollowListApi,
  deleteHistoryApi,
} from "@/api/user";
import NoLoginView from "@/components/NoLoginView.vue";
import { getFollowListApi } from "@/api/follow";
import { getFansListApi } from "@/api/fans";
import Attention from "@/components/Attention.vue";
import DiverseWorks from "@/components/DiverseWorks.vue";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      likeList: [],
      token: getToken(),
      allWorksList: [],
      collectWorksList: [],
      historyWorksList: [],
      followList: [],
      fansList: [],
      imageUrl: "",
      activeName: "first",
      activeTab: "0",
      saveLoginInfo: false,
      dialogVisible: false,
      dialogFormVisible: false,
      allWorksKeyword: "",
      likeWorksKeyword: "",
      page: 1,
    };
  },
  components: {
    Attention,
    DiverseWorks,
    NoLoginView,
  },
  created() {
    this.activeTab =
      this.$route.query.activeTab == undefined
        ? "0"
        : this.$route.query.activeTab;
    this.getLikeListFun();
    this.getAllWorksListFun();
    this.getCollectFun();
    this.getHistoryListFun();
    this.followListFun();
    this.fansListFun();
  },
  methods: {
    handleWorksClick() {
      this.allWorksKeyword = "";
      this.likeWorksKeyword = "";
      this.page = 1;
    },
    searchLikeWorks() {
      this.page = 1;
      this.getLikeListFun();
    },
    searchAllWorks() {
      this.page = 1;
      this.getAllWorksListFun();
    },
    userInfoFun() {
      // getUserInfoApi().then((res) => {
      //   if (res.data.data.code == 200) {
      //     console.log(res.data.data);
      //     this.userInfo = res.data.data.data;
      //   }
      // });
      this.$store.dispatch("GetInfo");
    },
    getHistoryListFun() {
      getHistoryListApi().then((res) => {
        if (res.data.code == 200) {
          this.historyWorksList = res.data.data;
        }
      });
    },
    getCollectFun() {
      getCollectListApi().then((res) => {
        if (res.data.code == 200) {
          this.collectWorksList = res.data.data;
        }
      });
    },
    getAllWorksListFun() {
      getAllWorksListApi({
        userId: this.userInfo.userId,
        keyword: this.allWorksKeyword,
        page: this.page,
      }).then((res) => {
        if (res.data.code == 200) {
          this.allWorksList = res.data.data;
        }
      });
    },
    getLikeListFun() {
      getLikeListApi({
        userId: this.userInfo.userId,
        keyword: this.likeWorksKeyword,
        page: this.page,
      }).then((res) => {
        if (res.data.code == 200) {
          this.likeList = res.data.data;
        }
      });
    },
    openFollowFun() {
      if (getToken() == null || getToken() == undefined) {
      } else {
        this.dialogVisible = true;
        this.activeName = "first";
      }
    },
    followListFun() {
      getFollowListApi().then((res) => {
        if (res.data.data.code == 200) {
          this.followList = res.data.data.data;
        }
      });
    },
    fansListFun() {
      getFansListApi().then((res) => {
        if (res.data.data.code == 200) {
          this.fansList = res.data.data.data;
        }
      });
    },
    deleteHistoryFun() {
      deleteHistoryApi({ userId: this.userInfo.userId }).then((res) => {
        if (res.data.code == 200) {
          this.getHistoryListFun();
          this.$message({
            type: "success",
            message: "已删除成功",
          });
        } else {
          this.$message({
            type: "info",
            message: "删除失败",
          });
        }
      });
    },
    openFollowerFun() {
      if (getToken() == null || getToken() == undefined) {
      } else {
        this.dialogVisible = true;
        this.activeName = "second";
      }
    },

    editProfile() {
      this.dialogFormVisible = true;
    },
    handleClick(tab, event) {
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    submitUploadTitlePhoto(file) {},

    // 修改头像
    beforeAvatarUploadTitle(file) {
      const isJPEG = file.name.split(".")[1] === "jpeg";
      const isJPG = file.name.split(".")[1] === "jpg";
      const isPNG = file.name.split(".")[1] === "png";
      const isLt500K = file.size / 1024 / 500 < 2;
      if (!isJPG && !isJPEG && !isPNG) {
        this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
      }
      if (!isLt500K) {
        this.$message.error("单张图片大小不能超过 500KB!");
      }

      return (isJPEG || isJPG || isPNG) && isLt500K;
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.works .el-tabs__header {
  position: sticky;
  top: -1px;
  background: #161823;
  z-index: 2;
}

.avatar img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
}
.personal-message {
  display: flex;
  /* position: relative; */
  padding: 30px 80px;
  box-sizing: border-box;
  background: linear-gradient(0deg, #151723, #264264 40%, #191b27);
  width: 100%;
}
.message {
  margin-left: 20px;
  line-height: 2;
  color: #fff;
}
.skills {
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.skills p {
  font-size: 18px;
  margin: 0 6px;
}
.skills span {
  color: #676767;
  margin: 0 10px;
}
.save-login-info-switch {
  position: absolute;
  /* top: 25%; */
  top: 30px;
  font-size: 12px;
  right: 92px;
  color: #878787;
}
.edit-profile {
  position: absolute;
  /* top: 25%; */
  top: 112px;
  font-size: 12px;
  right: 92px;
}
.edit-profile .el-button--info {
  color: #e0e0e0;
  background-color: #474c56;
  /* border-color: #909399; */
  border: none;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/
.el-tabs__active-bar {
  background-color: transparent !important;
}

/*去掉tabs底部的下划线*/
.works .el-tabs__nav-wrap::after {
  position: static !important;
}
.works {
  background: #161823;
  padding: 5px 80px;
  box-sizing: border-box;
  flex: 1;
}
.works .el-tabs__item {
  font-size: 16px;
  color: #757474;
}
.works .el-tabs__item.is-active {
  color: #fff;
}
.works .el-icon-lock {
  margin: 0 5px;
}
.favorite-works {
  width: 100%;
  height: 100%;
}
.favorite-works ul {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}
.favorite-works ul li {
  list-style: none;
  width: 15%;
  height: 300px;
  float: left;
  margin: 10px;
  /* background: #252632; */
  border-radius: 5px;
}
.favorite-works ul li > div {
  height: 250px;
  overflow: hidden;
  border-radius: 5px;
}
/* .favorite-works ul li > div > div {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 5px;
} */
.cover-path > img {
  width: 100%;
  position: relative;
  height: 250px;
  filter: blur(8px);
  border-radius: 5px;
}
.cover-vedio > img {
  position: absolute;
  width: 100%;
  height: 250px;
  top: 0;
  object-fit: contain;
  border-radius: 5px;
}
/* .favorite-works ul li > div > div > img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  filter: blur(1px);
  border-radius: 5px;
} */
.like-number {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  bottom: 0;
  height: 48px;
  opacity: 0.8;
  position: absolute;
  width: 100%;
}
.like-number span {
  align-items: center;
  bottom: 4px;
  color: #fff;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 8px;
  line-height: 22px;
  position: absolute;
}
.favorite-works ul li p {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  display: -webkit-box;
  font-size: 14px;
  font-weight: 500;
  height: 44px;
  line-height: 22px;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition-duration: 0.35s;
  transition-property: margin;
}
.secondary-search {
  position: absolute;
  z-index: 2;
  top: -60px;
  right: 11px;
}
.secondary-search .el-input__inner {
  background-color: transparent !important;
  border: 1px solid #333536;
  color: #fff;
}
.attention .el-dialog__body {
  padding: 10px 20px !important;
}
.attention .el-dialog {
  background: #252632;
}
.attention .el-tabs__item {
  color: #b1afaf;
}
.attention .el-tabs__item:focus {
  color: #fff;
}
.attention .el-dialog__header {
  padding: 0;
}
.edit-message .el-dialog {
  background: #33343f;
}
.edit-message .el-dialog__body {
  padding: 5px 20px 0px 20px;
}
.edit-message .el-dialog__title {
  color: #fff;
}
.attention .el-tabs__item.is-active {
  color: #fff;
}
/* .attention .el-tabs__active-bar {
  background-color: transparent !important;
}

.attention .el-tabs__nav-wrap::after {
  position: static !important;
} */
.avatar-uploader .el-upload {
  /* border: 1px dashed #d9d9d9; */
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatar {
  width: 110px;
  height: 110px;
  display: block;
}
.avatar-blur {
  width: 110px;
  height: 110px;
  overflow: hidden;
  filter: blur(0.5px);
  display: block;
}
.edit-message .el-dialog__header .el-dialog__title {
  color: #fff;
}
.edit-experience,
.edit-name {
  margin: 20px 0;
}
.edit-experience span,
.edit-name span {
  color: #e2e2e2;
}
.edit-experience .el-textarea,
.edit-name .el-input {
  margin: 10px 0;
}
.edit-experience .el-textarea__inner,
.edit-name .el-input__inner {
  background: #4c4c55;
  border: none;
  color: #c9c9c9;
}
.edit-name .el-input__count .el-input__count-inner {
  background: none;
}
.avator-photo {
  text-align: center;
}
.avator-photo .avatar-uploader .el-upload {
  border-radius: 90px;
}
.user-footer {
  background: #252632;
}
.footer-first {
  width: 100%;
  height: 60px;
}
.footer-second {
  width: 60%;
  margin: auto;
  height: 80px;
  line-height: 1.5;
}
.footer-second p {
  font-size: 12px;
  color: #5b5b5b;
  text-align: center;
}
.footer-first ul {
  display: flex;
  justify-content: center;
  line-height: 60px;
}
.footer-first ul li {
  list-style: none;
  margin: 0 20px;
  color: #8b8b8b;
  font-size: 14px;
}
.more-help {
  height: 20px;
  text-align: right;
}
.more-help i {
  margin-right: 15px;
  color: #737373;
}
.works .el-tabs__content {
  position: relative;
  overflow: inherit;
}
/*去掉tabs底部的下划线*/
.attention .el-tabs__nav-wrap::after {
  position: static !important;
}
.edit-message .el-button--primary {
  background: #fe2c55;
  border: none;
}
.add-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 30px;
}
.secondary-search i:hover {
  color: #fff;
  font-weight: bold;
}
</style>
